<template>
  <div class="co-brands" :class="[{'empty':showEmpty}]">
      <div v-if="showEmpty" class="div-empty">
          <span class="iconfont icon-jingqingqidai"></span>
          <p class="empty-tip">敬请期待~</p> 
      </div>
      <ul v-else>
          <li v-for="(item, index) in activityData">
            <v-card :data="item"></v-card>
          </li>
      </ul>
  </div>
</template>

<script>
import { mapState } from "vuex";
import vCard from "./card.vue";

export default {
  name: "co-brands",
  data() {
    return {
      activityData: null,
      showEmpty: false
    };
  },
  components: { vCard },
  activated() {},
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      this.activityData = [
        // {
        //   type: "1",
        //   imgUrl:
        //     "http://www.jubenxiong.com/games/meilong/img/store/20180425/nx_1524644250299.jpg?imageView2/0/w/200",
        //   itemName: "克丽缇娜V脸限时打造",
        //   price: "198.00"
        // },
        // {
        //   type: "1",
        //   imgUrl:
        //     "http://www.jubenxiong.com/games/meilong/img/store/20180425/nx_1524644250299.jpg?imageView2/0/w/200",
        //   itemName: "克丽缇娜V脸限时打造",
        //   price: "198.00"
        // },
        // {
        //   type: "1",
        //   imgUrl:
        //     "http://www.jubenxiong.com/games/meilong/img/store/20180425/nx_1524644250299.jpg?imageView2/0/w/200",
        //   itemName: "克丽缇娜V脸限时打造",
        //   price: "198.00"
        // },
        // {
        //   type: "1",
        //   imgUrl:
        //     "http://www.jubenxiong.com/games/meilong/img/store/20180425/nx_1524644250299.jpg?imageView2/0/w/200",
        //   itemName: "克丽缇娜V脸限时打造",
        //   price: "198.00"
        // }
      ];
      if (!this.activityData || this.activityData.length == 0)
        this.showEmpty = true;
    }
  },
  computed: {
    ...mapState(["openid", "path", "userid"])
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.co-brands {
  width: 100%;
  flex: 1;
  // padding-bottom: 0.43rem;
  background-color: #efeff0;

  &.empty {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  ul {
    padding: 0.07rem 0.09rem 0 0.09rem;

    li {
      width: 100%;
      height: 1.89rem;
      margin-bottom: 0.06rem;
      box-shadow: 0 1px 0px rgba(150, 150, 150, 0.1);
    }
  }

  .div-empty {
    margin-bottom: 15vh;

    .icon-jingqingqidai {
      font-size: 0.9rem;
      color: #595656;
    }

    .empty-tip {
      margin-top: 0.06rem;
      font-size: 0.14rem;
      text-align: center;
      color: #595656;
      letter-spacing: 0.01rem;
    }
  }
}
</style>
